<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%  String point=(String) request.getSession().getAttribute("coordinatePoint");%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>巡检定位</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=0.3, user-scalable=0, minimum-scale=0, maximum-scale=5.0,user-scalable=yes">
    <link rel="stylesheet" type="text/css" href="/css/street/street.css"/>
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">
    <style>
        .formUl li label {
            float: left;
            width: 150px;
            vertical-align: middle;
            height: 34px;
            line-height: 34px;
            text-align: right;
            font-size: 14px;
        }
        .formUl li input[type=text]{
            border:1px solid #ddd;
        }
        .bgImg{
            width: 277px;
            height: 150px;
            margin: 200px auto;
            background-color: #357ece;
            border-radius: 10px;
            box-shadow: 3px 3px 3px #2F5C8F;
            overflow: hidden;
        }
        .IMG{
            float: left;
            width: 75px;
            height: 75px;
            margin-top: 37px;
            margin-left: 30px;
        }
        .TXT{
            float: left;
            color: #fff;
            font-size: 18px;
            margin-top: 60px;
            margin-left: 20px;
        }
    </style>
    <script src="/js/jquery/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/jquery/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layer/layer.js?20201106" type="text/javascript" charset="utf-8"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xYGEtnTuhROetxaRDXPNoFI3K7SKXjUU"></script>
</head>
<body >
<div class="bgImg">
    <div class="IMG">
        <img src="../img/sys/icon64_info.png">
    </div>
    <div class="TXT">请在手机定位</div>
</div>

<script type="text/javascript">
//    $.layerMsg({content:'请在手机定位',icon:2})
    function getLocalTime(nS) {
        return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17)
    }
    var user_id='';
    $('.mainRight').height($(document).height()-$('.header').height()-$('.mainLeft').height())
    var maps={
        map:null,
        point:null,
        init:function (fn) {
            this.map = new BMap.Map("allmap",{mapType:BMAP_HYBRID_MAP});    // 创建Map实例
            this.point = new BMap.Point(<%=point%>);//设置坐标
            this.map.centerAndZoom(this.point, 16);//创建比例
            this.map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
            this.map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
            this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            if(fn!=undefined){
                fn()
            }
        }
    }




    var theRockGardenMap={//网格员位置方法展示地图方法
        data:[],
        init:function (latitudeAndLongitude,fn) {
            this.data=latitudeAndLongitude;
            var dataArr=this.data;
            for(var i=0;i<dataArr.length;i++){
                var points=new BMap.Point(parseFloat(dataArr[i].lng),parseFloat(dataArr[i].lat))//对象实例化
                var marker;
                if(i==0){
                    var myIcon = new BMap.Icon("/img/grid/qiandaohongqi.png",
                        new BMap.Size(34,34));
                        marker = new BMap.Marker(points,{icon:myIcon});

                }else if(i==(dataArr.length-1)){
                    var myIcon = new BMap.Icon("/img/grid/zhongzhi.png",
                        new BMap.Size(34,34));
                    marker = new BMap.Marker(points,{icon:myIcon});
                }else {
                    marker = new BMap.Marker(points);//创建标注
                }

                maps.map.addOverlay(marker);// 将标注添加到地图中
                var label;
                if(marker.V==null){
                    location.reload()
                }


                marker.V.onmouseover=(function (i,markers,labels) {
                    return function () {
                        labels = new BMap.Label(dataArr[i].userName+'&nbsp;&nbsp;&nbsp;&nbsp;' +
                            ''+getLocalTime(dataArr[i].updateTime)+'<br/>'+dataArr[i].location
                            ,{offset:new BMap.Size(-20,-30)});
                        labels.setStyle({
                            backgroundColor :"0.7",
                            border :"1px solid red",
                            borderRadius:'6px',
                            fontWeight :"bold",
                            background:'#fff',
                            padding:'3px 6px'
                        })
                        markers.setLabel(labels);
                    }
                })(i,marker,label)

                marker.V.onmouseout=(function (marker) {
                    return function () {
                        $(marker.Yc.nextElementSibling).remove()
                    }
                })(marker)
//                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            }
            if(typeof fn=='function'){
                fn();
            }

        }
    }


    var scopeOfTheCommunity={
        polygon:null,
        polyline:null,
        init:function (dataArr,num,ids,type,strData) {//范围显示
            var colors='blue';
            if(num==1){
                colors='#3A4F0B';
            }
            this.polygon=new BMap.Polygon(dataArr, {strokeColor:colors, strokeWeight:2, strokeOpacity:1, fillOpacity: 0.05});  //创建多边形
//                var strIng=strData;
            maps.map.addOverlay(this.polygon);   //增加多边形


        },
        lineinits:function (dataArr) {//人员连线
            this.polyline = new BMap.Polyline(dataArr, {strokeColor:"red", strokeWeight:2, strokeOpacity:1});   //创建折线
            maps.map.addOverlay(this.polyline);   //增加折线
        }
    }





















    function gridMembermap(time,numid) {
        maps.map.clearOverlays();
        $.get('/footprint/getFootPrint',{
            uid:numid,
            app:1,
            date:time
        },function (json) {
            if(json.flag){
                stoneGarden();
                var objarr=json.obj.reverse();
                theRockGardenMap.init(json.obj,function () {
                    var arr=[];
                    for(var i=0;i<objarr.length;i++){
                        arr.push(new BMap.Point(parseFloat(objarr[i].lng),parseFloat(objarr[i].lat)))
                    }


                    scopeOfTheCommunity.lineinits(arr)
                })
            }
        },'json')
    }


    function stoneGarden() {
        scopeOfTheCommunity.init([//初始化石园街道
            new BMap.Point(118.001231,34.391279),
            new BMap.Point(118.034576,34.379303),
            new BMap.Point(118.038097,34.375371),
            new BMap.Point(118.032348,34.376145),
            new BMap.Point(118.032492,34.372034),
            new BMap.Point(118.038097,34.371914),
            new BMap.Point(118.032061,34.364942),
            new BMap.Point(118.046218,34.365836),
            new BMap.Point(118.050314,34.355704),
            new BMap.Point(118.024084,34.346644),
            new BMap.Point(118.023509,34.340563),
            new BMap.Point(118.02164,34.340176),
            new BMap.Point(118.027893,34.322767),
            new BMap.Point(117.986427,34.320858),
            new BMap.Point(117.98578,34.326523),
            new BMap.Point(117.965011,34.323721),
            new BMap.Point(117.980678,34.352038),
            new BMap.Point(117.986858,34.350369)


        ])
    }





    $('[name="printDate"]').val(new Date().Format("yyyy-MM-dd"))





//    maps.init(function () {
//        gridMembermap(undefined,$.cookie('uid'))
//    })//地图初始化





$('.Querysl').click(function () {
    gridMembermap($('[name="printDate"]').val(),$.cookie('uid'))
})


    $('.Querytwo').click(function () {
        var  dataids=null;
        if($('#roleName').attr('dataid')!=undefined){
            dataids=$('#roleName').attr('dataid').replace(',','')
        }

        gridMembermap($('[name="printDateshijian"]').val(),dataids)
    })
    
    $('.headTop ul li').click(function () {
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
        if($(this).attr('data-type')==0){
            $('.mainLeft>label').show()
            $('.mainLeft>div').hide()
            gridMembermap($('[name="printDate"]').val(),$.cookie('uid'))
        }else if($(this).attr('data-type')==1){
            $('.mainLeft>label').hide()
            $('.mainLeft>div').show()
            var  dataids=null;
            if($('#roleName').attr('dataid')!=undefined){
                dataids=$('#roleName').attr('dataid').replace(',','')
            }
            gridMembermap($('[name="printDateshijian"]').val(),dataids)

        }

    })


    $('.roleName').click(function () {
        user_id='roleName';
        $.popWindow('/common/selectUser?0')
    })



</script>
</body>
</html>